<template>
  <div class="row">
    <div class="container">
      <el-form :inline="true" class="demo-form-inline" :style="{marginTop: '20px',float: 'left'}">
        <el-form-item>
          <el-input v-model="requestData.requestData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="requestData.requestData.username" placeholder="请输入登录名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        stripe
        border
        size="mini"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="真实姓名"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="avatar"
          label="头像"
          align="center"
          width="180">
          <template slot-scope="scope">
            <img style="width: 80px;height: 30px"
                 :src="$image + scope.row.avatar"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="登录名"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="birthday"
          align="center"
          label="生日">
        </el-table-column>
        <el-table-column
          prop="create_user"
          align="center"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="create_date"
          align="center"
          width="160"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="role_id"
          align="center"
          :formatter="isProvince"
          label="权限">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editParam(scope.row)" type="warning">编辑</el-button>
            <el-button v-if="editAndDeleteButton" size="mini" type="danger" @click="deleteParam(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog style="text-align: left" title="用户信息修改" :visible.sync="outerVisible">

        <el-form ref="form" :model="addParam" label-width="120px" style="margin-top: 30px">

          <el-form-item label="头像">
            <el-upload
              class="upload-demo"
              ref="businessLicense"
              action
              :auto-upload="false"
              :on-change="uploadSectionFile"
              :file-list="fileList"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="addParam.name" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input v-model="addParam.username" disabled style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input type="password" v-model="addParam.password" style="width: 20%"></el-input>
          </el-form-item>


          <el-form-item label="手机号码">
            <el-input v-model="addParam.phone" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="地址">
            <el-input v-model="addParam.address" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="生日">
            <el-date-picker
              v-model="addParam.birthday"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="角色">
            <el-radio-group v-model="addParam.role_id" :disabled="user.role_id == 1 ? true : false">
              <el-radio :label="1" style="font-weight: bold;font-size: 1vw">用户</el-radio>
              <el-radio v-if="user.role_id == 0 ? true : false" :label="0" style="font-weight: bold;font-size: 1vw">管理员</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>


        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSubmit">提交</el-button>
          <el-button type="info" @click="outerVisible = false">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "infoList",
    data() {
      return {
        list: [],
        total: 0,
        outerVisible: false,
        editAndDeleteButton: false,
        requestData: {
          current: 1,
          pageSize: 10,
          requestData: {
            name:'',
            username:'',
          }
        },
        user:{},
        addParam: {
          name: '',
          username: '',
          password: '',
          phone: '',
          address: '',
          birthday: '',
          avatar: '',
          role_id: 1,
        },
        fileList: [],
      }
    },
    created() {
      this.initList()
      this.initButton()
      this.user = JSON.parse(sessionStorage.getItem("userInfo"))
    },
    mounted() {

    },
    methods: {
      initList() {
        this.service.post('/tbowner/list'
          , this.requestData)
          .then(result => {
            console.log(result)
            this.list = result.data.data.data;
          })
      },
      editParam(row) {
        this.fileList = [];
        this.fileList.push({name:row.avatar,url:this.$a + '/tbowner/images?fileName='+row.avatar})
        this.addParam = row;
        this.outerVisible = true;
      },
      editSubmit() {
        this.service.post('/tbowner/add'
          , {data: this.addParam})
          .then(result => {
            let data = result.data;
            if (data.code == 500) {
              his.$message.error("请求失败：" + data.data)
            }
            if (data.data > 0) {
              this.$message.success('修改成功')
              this.initList();
              this.outerVisible = false;
            } else {
              this.$message.error('修改失败')
            }
          })
      },
      isProvince(row, column, cellValue, index) {
        return cellValue == 0 ? '管理员' : '用户';
      },
      isError(row, column, cellValue, index) {
        return cellValue == 0 ? '否' : '是';
      },
      deleteParam(row) {
        console.log(row)
        this.$confirm('此操作将永久此用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.service.post('/tbowner/del'
            , {data: row.id})
            .then(result => {
              let data = result.data;
              if (data.data > 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.initList()
              } else {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      initButton() {
        let userInfo = sessionStorage.getItem("userInfo");
        if (userInfo == undefined || userInfo == null) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          }).then(() => {
            this.$router.push('/home/login')
          })
          return false;
        }
        let json = JSON.parse(sessionStorage.getItem("userInfo"));
        if (json.role_id == 0) {
          this.editAndDeleteButton = true;
        }
      },

      uploadSectionFile(file) {
        this.fileList = [];
        const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
        const isJPG = typeArr.indexOf(file.raw.type) !== -1;
        const isLt3M = file.size / 1024 / 1024 < 3;
        if (!isJPG) {
          this.$message.error('只能是图片!');
          this.$refs.upload.clearFiles();
          this.files = null;
          return;
        }
        if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 3MB!');
          this.$refs.upload.clearFiles();
          this.files = null;
          return;
        }
        this.files = file.raw;
        // FormData 对象
        let formData = new FormData();
        // 文件对象
        formData.append('file', this.files);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          methods: 'post'
        }
        this.service.post("/tbowner/fileUpload", formData, config).then(res => {
          this.addParam.avatar = res.data.filename
          this.fileList.push({name:res.data.filename,url:this.$a + '/tbowner/images?fileName=' + res.data.filename})
        })
      },

      onSubmit(){this.initList()},
      reset(){for (let item in this.requestData.requestData){this.requestData.requestData[item] = '';} },

    }
  }
</script>

<style scoped>

</style>
